import { NavLink, Outlet, createBrowserRouter, useParams } from "react-router-dom";


function Info() {
    const parma = useParams();

    return <>
        <p>详情信息</p>
        <p>{parma.id}</p>
    </>
}


const router = createBrowserRouter([
    {
        path: "/",
        element: <div>Home</div>,
    },
    {
        path: "/good",
        // Outlet 用于嵌套路由的显示,类似于vue中router-view
        element: <div>good<NavLink to="/good/apple">点击</NavLink><Outlet></Outlet></div>,
        // 嵌套路由
        children: [
            {
                path: "apple",
                element: <div>apple</div>,
            },
            {
                path: "banna",
                element: <div>banna</div>,
            },
        ],
    },
    {
        path: "/users",
        element: <div>Users<Outlet></Outlet></div>,
        children: [
            // 3.这里就是动态路由 ，可以传参使用 ：users/info/12
            {
                path: "info/:id",
                element: <Info></Info>
            }
        ],
    },
],
// 1.基础路由。只有地址输入/app 才进度页面跟目录，根地址，一般做微服务的时候使用最多

// {
//     basename:"/app"
// }
);



export default router;